<form [formGroup]="newPasswordForm" class="newPasswordForm" appCapsLock (capsLock)="capsLock=$event">
  <mat-form-field class="form-whole-line" *ngIf="previousPasswordNecessary">
    <input formControlName="previousPassword" matInput placeholder="{{ 'password-form.previous-password' | translate }}" required type="password">
    <mat-error *ngIf="newPasswordForm.get('previousPassword').errors?.required">{{ 'password-form.error-message-previous-password-required' | translate }}</mat-error>
    <mat-error *ngIf="newPasswordForm.get('previousPassword').errors?.wrongPassword">{{ 'password-form.error-message-previous-password-wrong' | translate }}</mat-error>
  </mat-form-field>
  <mat-form-field class="form-whole-line">
    <input formControlName="newPassword" matInput placeholder="{{ 'password-form.new-password' | translate }}" required type="password">
  </mat-form-field>
  <mat-form-field class="form-whole-line">
    <input formControlName="newPasswordRepetition" matInput placeholder="{{ 'password-form.new-password-repetition' | translate }}" required type="password">
  </mat-form-field>
  <mat-error class="error-span" *ngIf="newPasswordForm.get('newPassword').valid
                 && newPasswordForm.invalid">{{ 'password-form.passwords-do-not-match' | translate }}</mat-error>
  <mat-error class="error-span" *ngIf="newPasswordForm.get('newPassword').invalid">{{ 'password-form.new-password-invalid' | translate }}</mat-error>
  <mat-error class="error-span" *ngIf="capsLock">{{ 'password-form.caps-lock-on' | translate }}</mat-error>
</form>


